<template>
  <div>
    <h1 style="font-size:16px;">K线图scatter</h1>
    <div id="myChart" :style="{width: '100%', height: '400px'}"></div>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  components: {},
  mounted() {
    this.goCharts();
  },
  methods: {
    goCharts() {
      let myChart = this.$echarts.init(document.getElementById("myChart"));
      myChart.setOption({
        title: {
          //表格名称在左上角显示
          text: "firstK"
        },
        tooltip: {
          //提示框，鼠标悬浮交互时的信息提示。
          trigger: "axis",
          //触发类型，默认值为item 可选值为 item，axis  为item只会显示改点的数据，为axis时会显示该列下所有坐标轴对应的数据
          formatter: function(params) {
            //内容格式器：{string}（Template） | {Function}，支持异步回调见表格下方
            var res = params[0].seriesName + "" + params[0].name;
            res += "开盘:" + params[0].value[0] + "最高:" + params[0].value[3];
            res += "收盘:" + params[0].value[1] + "最低:" + params[0].value[2];
            return res;
          }
        },
        legend: {
          //图例，表示数据与图表的关联
          data: ["上证指数"]
        },
        toolbox: {
          //辅助工具箱，辅助功能，如添加标线，框选缩放等  就是右上角的工具箱
          show: "true",
          feature: {
            mark: { show: true }, //辅助线标志
            dataZoom: { show: true }, //  框选区域缩放
            dataView: { show: true, readOnly: false }, //  数据视图，readyOnly默认数据视图为只读，
            magicType: { show: true, type: ["line", "bar"] }, //
            restor: { show: true }, //
            saveAsImage: { show: true } //
          }
        },
        dataZoom: {
          //图表下面的缩放选择器
          show: true,
          realTime: true, //缩放变化是否实时显示
          start: 0,
          end: 100
        },
        xAxis: [
          {
            type: "category", //坐标轴类型横轴默认为category，纵轴默认为value  可选值为：category value time log
            boundaryGap: true, //类目其实和结束两端的空白策略，为FALSE则顶头
            axisTick: { onGap: false }, //坐标轴小标记  ongap：小标记是否显示为间隔，默认等于boundaryGap；
            splitLine: { show: false }, //分割线  show为false不显示
            data: [
              "2013/1/24",
              "2013/1/25",
              "2013/1/28",
              "2013/1/29",
              "2013/1/30",
              "2013/1/31",
              "2013/2/1",
              "2013/2/4",
              "2013/2/5",
              "2013/2/6",
              "2013/2/7",
              "2013/2/8",
              "2013/2/18",
              "2013/2/19",
              "2013/2/20",
              "2013/2/21",
              "2013/2/22",
              "2013/2/25",
              "2013/2/26",
              "2013/2/27",
              "2013/2/28",
              "2013/3/1",
              "2013/3/4",
              "2013/3/5",
              "2013/3/6",
              "2013/3/7",
              "2013/3/8",
              "2013/3/11",
              "2013/3/12",
              "2013/3/13",
              "2013/3/14",
              "2013/3/15",
              "2013/3/18",
              "2013/3/19",
              "2013/3/20",
              "2013/4/8",
              "2013/4/9",
              "2013/4/10",
              "2013/4/11",
              "2013/4/12",
              "2013/4/15",
              "2013/4/16",
              "2013/4/17",
              "2013/4/18",
              "2013/4/19"
            ]
          }
        ],
        yAxis: [
          {
            type: "value",
            scale: true, //脱离0值比例，放大聚焦到最终_min，_max区间
            boundaryGap: [0.01, 0.01]
          }
        ],
        series: [
          {
            name: "上证指数",
            type: "k",
            barMaxWidth: 20,
            itemStyle: {
              normal: {
                color: "red", // 阳线填充颜色
                color0: "lightgreen", // 阴线填充颜色
                lineStyle: {
                  width: 2,
                  color: "orange", // 阳线边框颜色
                  color0: "green" // 阴线边框颜色
                }
              },
              emphasis: {
                color: "black", // 阳线填充颜色
                color0: "white" // 阴线填充颜色
              }
            },
            data: [
              // 开盘，收盘，最低，最高
              {
                value: [2320.26, 2302.6, 2287.3, 2362.94],
                itemStyle: {
                  normal: {
                    color0: "blue", // 阴线填充颜色
                    lineStyle: {
                      width: 3,
                      color0: "blue" // 阴线边框颜色
                    }
                  },
                  emphasis: {
                    color0: "blue" // 阴线填充颜色
                  }
                }
              },

              [2320.26, 2302.6, 2287.3, 2362.94],

              [2300, 2291.3, 2288.26, 2308.38],

              [2295.35, 2346.5, 2295.35, 2346.92],

              [2347.22, 2358.98, 2337.35, 2363.8],

              [2360.75, 2382.48, 2347.89, 2383.76],

              [2383.43, 2385.42, 2371.23, 2391.82],

              [2377.41, 2419.02, 2369.57, 2421.15],

              [2320.26, 2302.6, 2287.3, 2362.94],

              [2300, 2291.3, 2288.26, 2308.38],

              [2295.35, 2346.5, 2295.35, 2346.92],

              [2347.22, 2358.98, 2337.35, 2363.8],

              [2360.75, 2382.48, 2347.89, 2383.76],

              [2383.43, 2385.42, 2371.23, 2391.82],

              [2377.41, 2419.02, 2369.57, 2421.15],

              [2320.26, 2302.6, 2287.3, 2362.94],

              [2300, 2291.3, 2288.26, 2308.38],

              [2295.35, 2346.5, 2295.35, 2346.92],

              [2347.22, 2358.98, 2337.35, 2363.8],

              [2360.75, 2382.48, 2347.89, 2383.76],

              [2383.43, 2385.42, 2371.23, 2391.82],

              [2377.41, 2419.02, 2369.57, 2421.15],

              [2320.26, 2302.6, 2287.3, 2362.94],

              [2300, 2291.3, 2288.26, 2308.38],

              [2295.35, 2346.5, 2295.35, 2346.92],

              [2347.22, 2358.98, 2337.35, 2363.8],

              [2360.75, 2382.48, 2347.89, 2383.76],

              [2383.43, 2385.42, 2371.23, 2391.82],

              [2377.41, 2419.02, 2369.57, 2421.15],

              [2320.26, 2302.6, 2287.3, 2362.94],

              [2300, 2291.3, 2288.26, 2308.38],

              [2295.35, 2346.5, 2295.35, 2346.92],

              [2347.22, 2358.98, 2337.35, 2363.8],

              [2360.75, 2382.48, 2347.89, 2383.76],

              [2383.43, 2385.42, 2371.23, 2391.82],

              [2377.41, 2419.02, 2369.57, 2421.15],

              [2320.26, 2302.6, 2287.3, 2362.94],

              [2300, 2291.3, 2288.26, 2308.38],

              [2295.35, 2346.5, 2295.35, 2346.92],

              [2347.22, 2358.98, 2337.35, 2363.8],

              [2360.75, 2382.48, 2347.89, 2383.76],

              [2383.43, 2385.42, 2371.23, 2391.82],

              [2377.41, 2419.02, 2369.57, 2421.15],

              [2320.26, 2302.6, 2287.3, 2362.94],

              [2300, 2291.3, 2288.26, 2308.38],

              [2295.35, 2346.5, 2295.35, 2346.92],

              [2347.22, 2358.98, 2337.35, 2363.8],

              [2360.75, 2382.48, 2347.89, 2383.76],

              [2383.43, 2385.42, 2371.23, 2391.82],

              [2377.41, 2419.02, 2369.57, 2421.15]
            ]
          }
        ]
      });
    }
  }
};
</script>
<style lang="less" scoped>
</style>